<script setup>
import { useFeedbacks } from '@/stores/feedback.js'
import { storeToRefs } from 'pinia'
import { onMounted } from 'vue'

const feedback = useFeedbacks()
const { curAqi,curFeedback,curInfo } = storeToRefs(feedback)

const goBack = () => {
  feedback.goBack()
}
onMounted(() => {
  feedback.checkData()
  feedback.loadAQIs()
})

</script>

<template>
  <el-card class="login">
    <template #header style="width:fit-content;height:60px;background-color:#303133;
        position: fixed !important;marign-top: 0px;marign-left: 0px;">
        <el-page-header
          @back="goBack"
          content="详情页面"
          title="返回"
        >
        </el-page-header>
    </template>
    <template #default>
      <el-descriptions
        title="公众监督反馈结果"
        direction="horizontal"
        :column="1"
        :size="medium"
        border
      >
        <el-descriptions-item label="网格员">{{curFeedback.gname}}</el-descriptions-item>
        <el-descriptions-item label="监督地点">{{curFeedback.address}}</el-descriptions-item>
        <el-descriptions-item label="监督时间">{{curFeedback.createtime}}</el-descriptions-item>
        <el-descriptions-item label="上报人">{{curFeedback.pname}}</el-descriptions-item>
        <el-descriptions-item label="确认AQI">{{curAqi.id}}级
          <el-tag>{{curAqi.expln}}</el-tag>
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              二氧化硫SO2
              <el-tag>{{ curInfo.so2level }}级</el-tag>
            </div>
          </template>
          {{ curInfo.so2value }} μg/m³
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              一氧化碳CO
              <el-tag>{{ curInfo.colevel }}级</el-tag>
            </div>
          </template>
          {{ curInfo.covalue }} mg/m³
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              空气悬浮物PM2.5
              <el-tag>{{ curInfo.spmlevel }}级</el-tag>
            </div>
          </template>
          {{ curInfo.spmvalue }} 单位
        </el-descriptions-item>
      </el-descriptions>

    </template>
  </el-card>
</template>

<style scoped lang="scss">

.login .el-page-header {
  line-height: 60px;
  margin-left: 20px;
}
.login .el-page-header__content {
  color: #181818;
}
</style>